<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="1200" height="500"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("myCanvas");
	     	var ctx=canvas.getContext("2d");
	     	var rot = 0; 
	     	var R =200;
	     	var leftx = 250;
	     	var xuanzhuanjd = 5;
	     	var huchang = 5 * Math.PI*R/180;
	     	
	     	setInterval(function(){
	     		
	     	ctx.fillStyle="yellow";
			ctx.fillRect(0,0,1200,450);
	

			ctx.beginPath();
			ctx.fillStyle = "#000000";
			ctx.arc(leftx,250,R,(rot/180)*Math.PI,(1+rot/180)*Math.PI);
			ctx.fill();
	     	
	     	ctx.beginPath();
	     	ctx.fillStyle = "#FFFFFF";
			ctx.arc(leftx,250,R,(rot/180)*Math.PI,(1+rot/180)*Math.PI,true);
			ctx.fill();
	     	
	     	var y = Math.sin((rot/180)*Math.PI)*0.5*R;
	        var x = Math.cos((rot/180)*Math.PI)*0.5*R;
	     	
	     	ctx.beginPath();
	     	ctx.fillStyle = "#000000";
			ctx.arc(leftx-x,250-y,0.5*R,0,2*Math.PI);
			ctx.fill();
			
			ctx.beginPath();
	     	ctx.fillStyle = "#FFFFFF";
			ctx.arc(leftx+x,250+y,0.5*R,0,2*Math.PI);
			ctx.fill();
			
			ctx.beginPath();
	     	ctx.fillStyle = "#FFFFFF";
			ctx.arc(leftx-x,250-y,0.15*R,0,2*Math.PI);
			ctx.fill();
			
			ctx.beginPath();
	     	ctx.fillStyle = "#000000";
			ctx.arc(leftx+x,250+y,0.15*R,0,2*Math.PI);
			ctx.fill();
			
			rot = rot + xuanzhuanjd;
//			leftx = leftx + 10 ;
			leftx=leftx+huchang;
			if(leftx>1000 ||leftx<200){
				huchang = -huchang;
				xuanzhuanjd = -xuanzhuanjd;
			}
			
	     	},100);
	     	
	     	
		</script>
	</body>
</html>
